<template>
  <Tabs :value="show" >
    <TabPane label="分公司排名" name="company" >
      <div class="charts-border indexChartsSize" @mousemove="handleMouseMove" @mouseenter="enter()" @mouseleave="leave()">
        <company-score-rank></company-score-rank>
      </div>
      <div class="charts-border indexChartsSize">
        <station-score-rank
          :xianStationScoreRankDataStationName="xianStationScoreRankDataStationName"
          :xianStationScoreRankDataScoreData="xianStationScoreRankDataScoreData">
        </station-score-rank>
      </div>
      <div class="charts-border indexChartsSize">
        <company-score-trend></company-score-trend>
      </div>
    </TabPane>
    <TabPane label="服务车辆及人次" name="station">
      <div class="charts-border indexChartsSize">
        <company-service-cars-Top5></company-service-cars-Top5>
      </div>
      <div class="charts-border indexChartsSize">
        <company-service-persons-Top5></company-service-persons-Top5>
      </div>
      <div class="charts-border indexChartsSize">
        <company-service-c-a-p-trend></company-service-c-a-p-trend>
      </div>
    </TabPane>
  </Tabs>
</template>

<script>

import CompanyScoreRank from "./companyScoreRank";
import StationScoreRank from "./stationScoreRank";
import CompanyScoreTrend from "./companyScoreTrend";

import CompanyServiceCarsTop5 from "./companyServiceCarsTop5";
import CompanyServicePersonsTop5 from "./companyServicePersonsTop5";
import CompanyServiceCAPTrend from "./companyServiceCAPTrend";

import {mapState, mapGetters, mapActions} from 'vuex'
var node_schedule = require("node-schedule");

export default {
  components: {
    CompanyScoreRank,
    StationScoreRank,
    CompanyScoreTrend,
    CompanyServiceCarsTop5,
    CompanyServicePersonsTop5,
    CompanyServiceCAPTrend
  },
  data() {
    return {
      show: "company",

    }
  },
  computed:{
    ...mapState([
      'xianStationScoreRankData',
      'xianStationScoreRankDataStationName',
      'xianStationScoreRankDataScoreData'])
  },
  created() {
    // data.sort().reverse()
    let scoreParams = {
      company_id: '49'
    }
    this.getXianStationCompositeIndexNow(scoreParams)
  },
  mounted() {
    var intervalRightStation = node_schedule.scheduleJob(
      "*/30 * * * * *",
      () => {
        console.log("省级每5秒执行一次!");
        this.show = this.show === "company" ? "station" : "company";
      }
    );
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log("取消首页省级数据");
      intervalRightStation.cancel();
    });
  },
  methods: {
    ...mapActions(['getXianStationCompositeIndexNow']),
    handleMouseMove(event){
      // console.log('鼠标：', event.offsetX, event.offsetY)
    },
    enter(){
      // console.log('鼠标enter：', event)
    },
    leave(){
      // console.log('鼠标leave：', event)
    }
  }
};
</script>

<style lang="less">
.indexChartsSize {
  width: 500px;
  margin-bottom: 10px;
  height: 28vh;
  z-index: 2;
}
.indexChartsSize2 {
  width: 500px;
  height: 28vh;
  z-index: 2;
}
</style>
